<script setup>
import MoniterItem from "@/components/MoniterItem.vue";
import { computed, inject, onMounted, reactive, watch } from "vue";
const circleWidth = computed(() => {
  return (screen.width / 100) * 3.5;
});

const $axios = inject("$axios");

const props = defineProps({
  mapData: Object,
});

watch(props.mapData, (n, v)=>{
  getBackHomeCount()
})

// 定义数据
const tableData = reactive([
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
]);

// 获取数据
function getBackHomeCount() {
  tableData.splice(0, tableData.length);
  $axios
    .get("/api/overview/population", {
      params: {
        areaCode: props.mapData.areaCode,
      },
    })
    .then((res) => {
      console.log('人口信息', res)
      res.data.data.forEach((item) => {
        tableData.push({
          town: item.town,
          areaCode: item.areaCode,
          resident: item.resident,
          guest: item.guest,
          backHome: item.backHome,
          outside: item.outside,
          school: item.school,
        });
      });
    });
}

const colorList = [
  "#7695ff",
  "#7695ff",
  "#3E9DFF",
  "#42FBFE",
  "#37FAC6",
  "#1ACFFF",
];
const list = reactive([]);
function getChartData(type) {
  $axios
    .get("person_info/personAreaStat", { params: { standard: type } })
    .then((res) => {
      list.arr = res.data.data;
    });
}


onMounted(() => {
  getBackHomeCount();
  getChartData("community");
});
</script>

<template>
  <MoniterItem title="人口信息" @timeUnitClicked="getChartData">
    <template #right>
        <a href="/admin/#/yq/Person" style="color: #00f9ff;text-decoration: none;" target="_blank">更多》</a>
    </template>
    <template #content>
      <!-- <div class="pepData">
        <div class="pepItem" v-for="(item, index) in list.arr" :key="index">
          <div class="title">{{ item.standard }}</div>
          <el-progress
            type="circle"
            :percentage="item.rate"
            :width="circleWidth"
            :color="colorList[index]"
          >
            <template #default>
              <span class="percentage-value">{{ item.rate }}%</span>
              <span class="percentage-label"
                ><span>{{ item.persons }}</span
                >人</span
              >
            </template>
          </el-progress>
        </div>
      </div> -->
      <div class="people-info">
        <div class="people-info-left" style="opacity:0;">
          <img src="@/assets/zuo.png" />
        </div>
        <div class="people-info-box">
          <div class="people-item p1">
            <div class="people-count">
              {{ tableData[0]?.town?tableData[0].town:mapData.name }}
              <text></text>
            </div>
            <div class="people-desc">乡镇名称</div>
          </div>
          <div class="people-item p2">
            <div class="people-count">
              {{ tableData[0]?.resident?tableData[0]?.resident:0 }}
              <text>人</text>
            </div>
            <div class="people-desc">常住人口数</div>
          </div>
          <div class="people-item p3">
            <div class="people-count">
              {{ tableData[0]?.guest?tableData[0]?.guest:0 }}
              <text>人</text>
            </div>
            <div class="people-desc">流动人口数</div>
          </div>
          <div class="people-item p4">
            <div class="people-count">
              {{ tableData[0]?.backHome?tableData[0]?.backHome:0 }}
              <text>人</text>
            </div>
            <div class="people-desc">返乡人口数</div>
          </div>
          <div class="people-item p5">
            <div class="people-count">
              {{ tableData[0]?.outside?tableData[0]?.outside:0 }}
              <text>人</text>
            </div>
            <div class="people-desc">外出务工人数</div>
          </div>
          <div class="people-item p6">
            <div class="people-count">
              {{ tableData[0]?.school?tableData[0]?.school:0 }}
              <text>人</text>
            </div>
            <div class="people-desc">外出上学人口数</div>
          </div>
        </div>
        <div class="people-info-right" style="opacity:0;">
          <img src="@/assets/you.png" />
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
.people-info {
  width: 489px;
  height: 224px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}
.people-info-left{

}
.people-info-box {
  // width: 377px;
  width: 400px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.people-item {
  margin-bottom: 10px;
  width: 101px;
  height: 89px;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  .people-count {
    font-size: 18px;
    color: #00EAFF;
    text {
      font-size: 12px;
      color: #fff
    }
  }
  .people-desc {
    font-size: 14px;
    color: #ffffff;
    margin-top: 27px;
  }
}

.p1 {
  background-image: url('@/assets/personbg.png');
}

.p2 {
  background-image: url('@/assets/p2.png');
}

.p3 {
  background-image: url('@/assets/p3.png');
}

.p4 {
  background-image: url('@/assets/p4.png');
}

.p5 {
  background-image: url('@/assets/p5.png');
}

.p6 {
  background-image: url('@/assets/p6.png');
}

.pepData {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.pepItem {
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title {
    font-size: 14px;
    padding: 7px;
  }
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  color: #7695ff;
}
.percentage-label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: white;
}
</style>
